import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

import { Tabs } from '../style';
import { getlist } from '@/api/http';

@withRouter
class Tab extends Component {
  state = {
    To: [
      '剃须刀排行榜',
      '吹风机排行榜',
      '理发器排行榜',
      '熨烫系列排行榜',
      '毛球修剪器排行榜',
      '智能插座排行榜'
    ],
    list: [],
    clas: 0
  }
  //  开始执行一次
  componentDidMount() {
    getlist(1).then(e => {
      this.setState(() => ({ list: e.data.data.list }))
    })
  }
  // 点击事件 触发的
  setClas = async (index) => {
    let ret = await getlist(index + 1)
    this.setState({
      clas: index,
      list: ret.data.data.list
    })
  }
  shangp(e) {
    // console.log(this.props);
    this.props.history.push('/xiangqing/'+e)
  }
  render() {
    return (
      <Tabs>
        <div className='top'>
          {this.state.To.map((e, index) => (
            <span className={this.state.clas === index ? 'span yanshi' : 'span '}
              key={index}
              onClick={() => this.setClas(index)}
            >
              {e}
            </span>
          ))}
        </div>
        <div className='cen'>
          {
            this.state.list.length > 0 && this.state.list.map((e, index) => (
              <div key={e.product.id} className='box' onClick={(a) => this.shangp(e.product.productSn)}>
                <p className='top_p'><span>Top</span> {index + 1}</p>
                <div>
                  <img src={e.product.pic} alt="" />
                </div>
                <p className='bot_p'><span>{e.product.name}</span></p>
              </div>)
            )
          }
        </div>
      </Tabs>
    );
  }
}

export default Tab;